<template>
  <div>
    <div class="favorites">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <h1 class="mint-header-title">收藏</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text"></label>
          </button>
        </div>
      </header>
      <mt-loadmore :top-method="loadTop" ref="loadmore">
        <div class="goodsList" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
          <Waterfall :gutterHeight="10" :maxCol="2" :percent="[1,1]">
            <WaterfallItem v-for="item in userCollectList">
              <a href="#" class="goodIndex">
                <img :src="item.goodsImg" alt="" v-if="item.goodsImg">
                <img src="./../../assets/common/images/none-bg.jpg" alt="" v-else>
                <div class="info">
                  <h3 style="font-weight:700;">{{item.sellingPoints}}</h3>
                  <p style="font-weight:700;color:#afafaf;">￥{{item.goodsPrice|formatMoney}}
                  </p>
                </div>
              </a>
            </WaterfallItem>
          </Waterfall>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>
<script>
import {
  mapGetters
} from 'vuex'
import {
  getUserCollect
} from '@/api/shop'
import { Waterfall, WaterfallItem } from 'vue2-waterfall'
export default {
  data() {
    return {
      pageIndex: 0,
      pageSize: 50,
      userCollectList: []
    }
  },
  watch: {},
  components: {
    Waterfall,
    WaterfallItem
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    loadTop() {
      // 下拉刷新
      this.$refs.loadmore.onTopLoaded()
      this.userCollectList = []
      this.fetchData()
    },
    fetchData() {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      getUserCollect({ userId: this.userInfo.id, pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
        this.userCollectList = this.userCollectList.concat(res.data.userCollectList)
      })
    }
    // loadMore() {
    //   this.pageIndex++
    // getUserCollect({ userId: this.userInfo.id, pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
    //   this.userCollectList = this.userCollectList.concat(res.data.userCollectList)
    //   this.total = res.data.total
    // })
    // }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';

.favorites {
  min-height: 100vh;
  margin-top: 40px;
  .mint-header {
    background-color: #FFF;
    color: #000;
    z-index: 2;
    font-size: 16px;
  }
  .goodsList {
    overflow: hidden;
    padding: 2.7%;
    .goodIndex {
      display: inline-block;
      background-color: #fff;
      border: 1px solid rgba(174, 174, 174, 0.3);
      color: #000;
      margin: 0 5px;
      img {
        width: 100%;
        height: auto;
      }
      .info {
        padding: 5px;
        h3 {
          margin-bottom: 10px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        p {
          line-height: 20px;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
